<template>
  <div>
    <!-- <order-data></order-data> -->
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1200"
      :defaultParams="defaultParams"
      :disabledKey="'returnGoodsStatus'"
      :sellCardCheck="true"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="退款状态">
            <a-select
              style="width: 200px"
              :options="createFrom"
              v-decorator="['returnGoodsStatus', { initialValue: '' }]"
              placeholder="请选择创建所属"
            />
          </a-form-item>
          <a-form-item label="活动名称">
            <a-input
              style="width: 200px"
              v-decorator="['saleCardName']"
              placeholder="请输入活动名称"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="申请人">
            <a-input
              style="width: 200px"
              v-decorator="['userName']"
              placeholder="请输入申请人"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="申请退款时间">
            <fast-range-picker
              allowClear
              v-decorator="['createStartDate-createEndDate']"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>

      <template slot="oprationRow">
        <!-- <a-button type="primary">申请通过</a-button>
        <a-button type="primary">申请驳回</a-button> -->
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="orderInfo(record.id, record)"
            >详情</a
          >
        </a-space>
      </template>
    </search-table>
    <refundDetails
      :visible="detailsVisible"
      @cancel="closeOrderDetailsModal"
      @getList="getList"
      :orderId="orderId"
      :formData="formData"
    ></refundDetails>
  </div>
</template>
<script>
import refundDetails from "./components/refundDetails.vue";
export default {
  name: "refundManage",
  components: {
    refundDetails,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "/order/goodsrepairs/refund/page",
      columns: [
        {
          title: "活动名称",
          dataIndex: "saleCardName",
          key: "saleCardName",
        },
        {
          title: "活动封面",
          dataIndex: "saleCardUrl",
          key: "saleCardUrl",
          align: "center",
          customRender: (text, row) => {
            if (text) text = text.split(",")[0];
            return <table-img src={text} />;
          },
        },
        {
          title: "申请人",
          dataIndex: "userName",
          key: "userName",
          align: "center",
        },
        {
          title: "所属导购",
          dataIndex: "guideName",
          key: "guideName",
        },
        {
          title: "申请时间",
          dataIndex: "createDate",
          key: "createDate",
        },
        // {
        //   title: "用户账号",
        //   dataIndex: "userPhone",
        //   key: "userPhone",
        // },
        {
          title: "退款理由",
          dataIndex: "reason",
          key: "reason",
        },
        {
          title: "退款金额",
          dataIndex: "refundPrice",
          key: "refundPrice",
          align: "center",
          customRender: (text, row) => {
            // console.log("text", text);
            return (text / 100).toFixed(2) + "元";
          },
        },
        {
          title: "审核时间",
          dataIndex: "updateDate",
          key: "updateDate",
        },
        {
          title: "申请结果",
          dataIndex: "returnGoodsStatus",
          key: "returnGoodsStatus",
          align: "center",
          customRender: (text, row) => {
            // console.log("text", text);
            switch (text) {
              case "TO_AUDIT":
                return "待审核";
              case "REFUND_OF":
                return "退款中";
              case "USER_CANCEL":
                return "撤销申请";
              case "REFUND_FINISH":
                return "已退款";
              case "REVIEW_FAILED":
                return "已驳回";
            }
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          width: 80,
          scopedSlots: { customRender: "operation" },
        },
      ],
      defaultParams: {
        orderType: "SALE_CARD_ORDER",
      },
      detailsVisible: false,
      orderId: "",
      formData: {},
      createFrom: [
        { label: "全部", value: "" },
        { label: "待审核", value: "TO_AUDIT" },
        { label: "已驳回", value: "REVIEW_FAILED" },
        { label: "退款中", value: "REFUND_OF" },
        { label: "已退款", value: "REFUND_FINISH" },
      ],
    };
  },
  methods: {
    orderInfo(id, record) {
      this.detailsVisible = true;
      this.orderId = id;
      this.formData = record;
    },
    closeOrderDetailsModal() {
      this.detailsVisible = false;
    },
    //刷新列表
    getList() {
      this.$refs.searchtable.refreshTable();
    },
  },
};
</script>
<style lang="less" scoped>
</style>